<template>
	<view class="articleList">
		<div class="title" @click="comeBack()">
			<image src="../../static/icon_arrow_blue_left.png"></image>
			{{title}}
		</div>
			<div class="list" v-for="item in list" @click="articleDetail(item['id'])">
				<image :src="item['image']" ></image>
				<div class="list_content">
					<div>{{item['title']}}</div>
<!-- 					<div>{{item['intro']}}</div> -->
<!-- 					<div v-if="title == '健康百科'">{{item['createTime']}}</div> -->
				</div>
			</div>
	</view>
</template>

<script lang="ts">
import { globalVariable } from '../../globalVariable/globalVariable';
import {request} from '../../Providing/request';
	export default {
		data() {
			return {
				title:"",
				list:[],
			};
		},
		methods:{
			getArticleList(){
				new request().getArticleList().then((res)=>{
					this.list = res['lists']
				})
			},
			comeBack() {
				uni.$emit("goToMenuList")
			},
			articleDetail(id){
				globalVariable.articleDetailId = id;
				uni.$emit("goToArticleDetail")
			}
		},
		created() {
			if(globalVariable.articleListId == "3"){
				this.title = "科室简介"
			}else if(globalVariable.articleListId == "4"){
				this.title = "健康百科"
			}else{
				this.title = "文章列表"
			}
			this.getArticleList();
		}
	}
</script>

<style lang="scss">
	.articleList{
		width: 100%;
		height: 800px;
		.title {
			width: 100%;
			height: 40px;
			line-height: 40px;
			margin-left: 10px;
			color: #2f59f3;
			letter-spacing: 25px;
			text-indent: 10px;
			margin: auto;
			padding-left: 20px;
			background-color: #fff;
		
			image {
				width: 15px;
				height: 30px;
				top: 5px;
				float: left;
		
		
			}
		}
		
		.list{
			display: flex;
			width: 90%;
			margin: 20px auto;

			image{
				width: 200px;
				height: 150px;
			}
			
			.list_content{
				  flex: 1;
				  line-height: 150px;
				  padding-left: 20px;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  white-space: nowrap;
			}
		}
	}
</style>
